```html
<script setup>
  import * as accordion from "@zag-js/accordion"
  import { normalizeProps, useMachine } from "@zag-js/vue"
  import { computed } from "vue"

  const data = [
    { title: "Watercraft", content: "Sample accordion content" },
    { title: "Automobiles", content: "Sample accordion content" },
    { title: "Aircraft", content: "Sample accordion content" },
  ]

  const service = useMachine(accordion.machine, { id: "1" })

  const api = computed(() => accordion.connect(service, normalizeProps))
</script>

<template>
  <div ref="ref" v-bind="api.getRootProps()">
    <div
      v-for="item in data"
      :key="item.id"
      v-bind="api.getItemProps({ value: item.title })"
    >
      <h3>
        <button v-bind="api.getItemTriggerProps({ value: item.title })">
          {{ item.title }}
        </button>
      </h3>
      <div v-bind="api.getItemContentProps({ value: item.title })">
        {{ item.content }}
      </div>
    </div>
  </div>
</template>
```
